<!-- 基本信息 -->
<script setup lang="ts">
import type { EditInfrenceBasicInfo } from "@/common/apis/train/type"
import type { FormRules } from "element-plus"
import { FormTypeEnum } from "@/common/constants/other-keys"
import SelectTag from "@@/components/SelectTag/index.vue"

interface Props {
  dialogType: FormTypeEnum
  ruleForm: EditInfrenceBasicInfo
  isEdit?: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(["update:ruleForm"])
const ruleFormRef = ref()

const rules = reactive<FormRules>({
  task_name: [
    { required: true, message: "请输入任务名称", trigger: "change" },
    { required: true, message: "请输入任务名称", trigger: "change" }
  ],
})

const localRuleForm = computed({
  get: () => props.ruleForm,
  set: (newValue) => {
    emit("update:ruleForm", newValue)
  }
})
// 暴露验证方法给父组件
defineExpose({
  validate: async () => {
    if (!ruleFormRef.value) return true
    try {
      await ruleFormRef.value.validate()
      return true
    } catch (error) {
      console.error('基本信息验证失败:', error)
      return false
    }
  },
  localRuleForm
})
</script>

<template>
  <div class="steps-wrapper">
    <div class="cpi-header-title">
      <SvgIcon name="info-title" />
      <span class="cpi-header-text">基本信息配置</span>
    </div>
    <el-form v-if="isEdit || dialogType == FormTypeEnum.CREATE" ref="ruleFormRef" :model="localRuleForm" status-icon
      :rules="rules" label-position="left" label-width="auto" class="demo-ruleForm">
      <!-- 第一行：任务名称 + 任务标签 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务名称" prop="task_name">
            <el-input v-model="localRuleForm.task_name" placeholder="请输入任务名称" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务标签" prop="task_tag">
            <SelectTag module="deduct" v-model:task_tags="localRuleForm.task_tag" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行：备注 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="任务描述" prop="task_describe">
            <el-input v-model="localRuleForm.task_describe" maxlength="200" :rows="3" placeholder="请输入描述"
              show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form v-else label-position="right" label-width="auto" class="demo-ruleForm">
      <!-- 第一行：任务名称 + 任务标签 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务名称：" prop="task_name">
            {{ $getViewText(localRuleForm.task_name) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务标签：" prop="task_tag">
            <el-tag v-for="item in localRuleForm.task_tag">
              {{ item }}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行：备注 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注：" prop="task_describe">
            {{ $getViewText(localRuleForm.task_describe) }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.el-tag+.el-tag {
  margin-left: 10px;
}
.steps-wrapper {
  padding: 20px;
  margin-top: 20px;
  width: 100%;
  height: auto;
  background: #031527;
}
.cpi-header-title {
  margin-bottom: 20px;
}
.cpi-header-text {
  margin-left: 6px;
}
</style>
